<template>
  <div>
    <div v-if="!this.stationinfo">
      <h1>您还没有完善站点信息，点击编辑站点信息，</h1>
      <el-button type="primary" @click="dialogVisible = true">完善信息</el-button>
    </div>
    <div v-else>
      <el-button type="primary" @click="editHandle">编辑</el-button>
      <div class="info">
        <el-divider><h1>站点信息</h1></el-divider>
        <br><br>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <h1>地区：<el-text>{{stationinfo.area}}</el-text></h1>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <h1>地址：<el-text>{{stationinfo.address}}</el-text></h1>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <h1>负责人：<el-text>{{stationinfo.major}}</el-text></h1>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <h1>联系方式：<el-text>{{stationinfo.phone}}</el-text></h1>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              <h1>邮箱地址：<el-text>{{stationinfo.email}}</el-text></h1>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!--新增对话框-->
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="600px"
        :before-close="handleClose">

      <el-form :model="editForm" :rules="editFormRules" ref="editForm">
        <el-form-item label="地区" prop="area" label-width="100px">
          <el-input v-model="editForm.area" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address" label-width="100px">
          <el-input v-model="editForm.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="major" label-width="100px">
          <el-input v-model="editForm.major" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号"  prop="phone" label-width="100px">
          <el-input v-model="editForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱"  prop="email" label-width="100px">
          <el-input v-model="editForm.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('editForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('editForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getStationInfo, updateOrSaveStation} from "@/api/sc";

export default {
  name: "StationCenter",
  data() {
    return {
      stationinfo: {},
      editForm: {},
      dialogVisible: false,
      editFormRules: {
        major: [
          {required: true, message: '请输入负责人名称', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱地址', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入联系方式', trigger: 'blur'}
        ],
        area: [
          {require: true, message: '请输入地区信息', trigger: 'blur'}
        ],
        address: [
          {require: true, message: '请输入地址信息', trigger: 'blur'}
        ]
      },
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo(){
      getStationInfo().then(res =>{
        this.stationinfo = res.data.data
      })
    },
    handleClose() {
      this.resetForm('editForm')
    },
    editHandle() {
      this.editForm = this.stationinfo
      this.dialogVisible = true
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false
      this.editForm = {}
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateOrSaveStation(this.editForm).then(res =>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose:() => {
                this.getInfo()
              }
            });
            this.dialogVisible = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>

</style>